<template>
  <div class="emil" v-if="show">
    <div class="emilTitle">
        为确认是本人操作，请完成以下验证！
    </div>
    <div class="emilInput">
       <span class="inputTitle">邮箱地址：</span>
       <input type="text" placeholder="例如：username@email.com">
       <button>发送</button>
    </div>
    <div class="emilInput">
       <span class="inputTitle">验证码：</span>
       <input type="text" v-model="vaildateVal" placeholder="请输入验证码">
       <span v-if="VaildateError">{{VaildateErrorCon}}</span>
    </div>
    <button class="emilBut" @click="emilBut">下一步</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      vaildateVal: '',
      VaildateErrorCon: '',
      VaildateError: false

    }
  },
  props: [
    'show',
    'typeNum'
  ],
  methods: {
    emilBut: function () {
      if (this.vaildateVal !== '') {
        var passwordI;
        if (this.typeNum === 0) {
          passwordI = false
        } else {
          passwordI = true
        }
        console.log(this.typeNum)
        var obj = {
          'identityShow': false,
          'messageShow': true,
          'passwordShow': false,
          'completeShow': false,
          'identityShowI': true,
          'messageShowI': true,
          'passwordShowI': passwordI,
          'completeShowI': false,
        }
        this.$emit('flowPClick', obj);
      } else {
        this.VaildateError = true
        this.VaildateErrorCon = '请输入验证码'
      } 
    }
  }
}
</script>

<style>
   @import '../../../static/FPassword/emil.css'
</style>
